<template>
    <div style="width: 100vw;display: flex;justify-content: center;background-color: white; ">
        <div class="total">
            <!--输入文本框 -->
            <div class="tital">
                
                <h1><i class="el-icon-edit"></i>留言</h1>
                <textarea name="text" cols="25" rows="10" placeholder="写下你的想法..." v-model="submitMsg"></textarea>
                <div style="display: flex;justify-content: right;">
                    <button id="submit" @click="submit()">提交</button>
                </div>
            </div>
            <!-- 留言 -->
            <div class="comments" v-show="this.comments == null ? false : true">
                <div style="margin-bottom: 20px;">Components | {{ comments.total }}条留言</div>
                <!-- 根留言 -->
                <div v-for="(item, index) in comments.rows" :key="index">
                    <div style="width: 100%;justify-content: space-between;display: flex;flex-direction: row;">
                        <div class="root1">
                            <div class="img">
                                <img :src="item.avatar" width="40px" :onerror="$store.state.errorImg">
                            </div>
                            <span>{{ item.username }}</span>
                            <span>{{ item.createTime }}</span>
                        </div>
                        <div class="root2">
                            <button id="reply" @click="isReply(item.username, item.id, item.createBy, item.id)">回复</button>
                        </div>
                    </div>
                    <div class="children">
                        <!-- 根留言内容 -->
                        <div class="rootcontext">
                            <span>{{ item.content }}</span>
                        </div>
                        <div v-for="(item1, index1) in item.children" :key="index1">
                            <div style="display: flex;justify-content: space-between ;flex-direction: row;width: 100%">
                                <div class="childrencomment">
                                    <div class="img2">
                                        <img :src="item1.avatar" width="30px" :onerror="$store.state.errorImg">
                                    </div>
                                    <span>{{ item1.username }}</span>
                                    <span>{{ item1.createTime }}</span>
                                </div>
                                <div class="root2">
                                    <button id="reply"
                                        @click="isReply(item1.username, item1.rootId, item1.createBy, item1.id)">回复</button>
                                </div>
                            </div>

                            <div class="childrentext">
                                <span>
                                    <span v-text="index1 > 0 ? '@' + item1.toCommentUserName + ':' : ''"
                                        style="color:#42adf4;"></span>
                                    {{ item1.content }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
            <el-dialog title="回复" :visible.sync="isreply" width="30%" :before-close="handleClose" :append-to-body="true"
                :close-on-click-modal="false" destroy-on-close center>
                <div class="tital">
                    <h1><i class="el-icon-edit"></i>回复@{{ comment.username }}</h1>
                    <textarea name="text" max-cols="25" rows="10" placeholder="写下你的回复..."
                        v-model="comment.content"></textarea>
                    <div style="display: flex;justify-content: right;">
                        <button id="submit" @click="reply()">回复</button>
                    </div>
                </div>
            </el-dialog>
        </div>
</template>
<script>
import { addMessageConmment } from '@/api/message.js'
import { getMessageComment, replyMessageComment } from '@/api/comment.js'
export default {

    data() {
        return {
            isreply: false,
            submitMsg: '',
            comment: {
                username: '',
                rootId: '',
                toCommentUserId: '',
                toCommentId: '',
                content: ''
            },
            comments: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        }
    },
    methods: {
        show() {
            getMessageComment(this.queryParams).then(res => {
                this.comments = res
            })
        },
        isReply(username, rootid, toCommentUserId, toCommentId) {
            this.isreply = true,
                this.comment.username = username,
                this.comment.rootId = rootid,
                this.comment.toCommentUserId = toCommentUserId
            this.comment.toCommentId = toCommentId
            // console.log(this.comment)
        },
        handleClose() {
            this.isreply = false;
            this.comment.content = ''
        },
        reply() {
            if (this.comment.content == '') {
                this.$message({
                    message: '不能为空哦!',
                    type: 'warning'
                })
                return;
            }
            replyMessageComment(this.comment).then(res => {
                if (res == undefined) {
                    this.$message({
                        message: '回复成功!',
                        type: "success"
                    })
                } else {
                    this.$message({
                        message: "回复失败!",
                        type: "error"
                    })
                }
                this.handleClose()
                this.show();
            })
        },
        submit() {
            let msg = this.submitMsg
            console.log(msg)
            if (msg == '') {
                this.$message({
                    message: "请输入内容!",
                    type: "warning"
                })
                return;
            }
            addMessageConmment(msg).then(res => {
                if (res == undefined) {
                    this.$message({
                        message: '发送成功!',
                        type: 'success'
                    })
                    this.submitMsg = ''
                    this.show()
                }
            })
        }
    },
    created() {
        this.show();
    }
}
</script>
<style>
.total {
    width: 800px;
    position: relative;
    margin-top: 10vh;
}

.tital {
    font-size: 1.5em;
    font-family: 'NavbarFont', 黑体;
    color: rgb(255, 175, 46);
    background-color: white;
}

textarea {
    width: 100%;
    height: 150px;
    border: 1px solid rgb(174, 174, 174);
    margin-top: 2vh;
    padding-top: 10px;
    border-radius: 10px;
    resize: none;
    outline: none;
    font-size: 20px;
}

textarea:focus {
    border: 2px solid rgb(255, 175, 46)
}

#submit {
    height: 30px;
    width: 60px;
    background-color: rgb(127, 88, 255);
    border: none;
    color: white;
    border-radius: 5px;
}

#submit:active {
    background-color: rgba(46, 147, 255, 0.484);
}

#reply {
    height: 23px;
    background-color: rgb(255, 175, 46);
    border: none;
    color: white;
    border-radius: 5px;
}

#reply:active {
    background-color: rgba(255, 175, 46, 0.484);
}

.root1 {
    display: flex;
    flex-direction: row;
}

.root1 span:nth-child(2) {
    color: rgb(228, 153, 60);
    font-size: 1em;
    position: relative;
    right: 0;
    margin-right: 20px;
}

.root1 span:nth-child(3) {
    font-size: 0.7em;
    position: relative;
    right: 0;
    padding-top: 3px;
    margin-right: 20px;
}

.img {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 10px;
}

.img2 {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 10px;
}


.comments {
    margin-top: 5vh;
    font-size: 1.3em;
    font-family: 'commentFont', 黑体;
    color: rgb(172, 172, 172);
    overflow: hidden;
}

.rootcontext {
    background-color: #f7f9fe;
    border-radius: 10px;
    padding: 10px;
    color: black;
    margin-bottom: 20px;
}

.children {
    margin-left: 50px;
    margin-bottom: 20px;
}

.childrencomment {
    display: flex;
    flex-direction: row;
}

.childrencomment span:nth-child(2) {
    color: rgb(228, 153, 60);
    font-size: 0.8em;
    margin-right: 20px;
}

.childrencomment span:nth-child(3) {
    margin-top: 2px;
    font-size: 0.7em;
}

.childrentext {
    background-color: #f7f9fe;
    border-radius: 10px;
    padding: 10px;
    color: black;
    font-size: 0.9em;
    margin-left: 40px;
    margin-bottom: 20px;
}

.replyComment {
    width: 30%;
}
</style>